<template>
  <el-form-item>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基础参数" name="1">
        <baseFormStyle />
      </el-collapse-item>
      <el-collapse-item title="饼图设置" name="2">
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title">半径设置</p>
          <div class="col-2 attr-item-edit-input">
            <el-input-number
              size="mini"
              v-model="chartConfig.series[0].radius[0]"
              controls-position="right"
              :min="0"
            />
            <div class="attr-item-edit-input-des">内半径 (px)</div>
          </div>
          <div class="col-2 attr-item-edit-input">
            <el-input-number
              size="mini"
              v-model="chartConfig.series[0].radius[1]"
              controls-position="right"
              :min="0"
            />
            <div class="attr-item-edit-input-des">外半径 (px)</div>
          </div>
        </div>
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title">数据显示</p>
          <div class="col-1 attr-item-edit-input">
            <el-select v-model="dataType" @change="handel" size="mini">
              <el-option label="数值显示" value="num">数值显示</el-option>
              <el-option label="百分比显示" value="percent"
                >百分比显示</el-option
              >
            </el-select>
          </div>
        </div>
        <!-- 数字样式/百分比样式 -->
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title" v-show="dataType==='num'">数字样式</p>
          <p class="attr-item-title" v-show="dataType==='percent'">百分比样式</p>
          <div class="col-2 attr-item-edit-input">
            <el-input-number
              size="mini"
              @change="updateNumberStyle"
              v-model="numberStyle.fontSize"
              controls-position="right"
              :min="0"
            />
          </div>
          <div class="col-2 attr-item-edit-input">
            <el-select
              @change="updateNumberStyle"
              v-model="numberStyle.fontWeight"
              size="mini"
            >
              <el-option
                v-for="item in textStyleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >{{ item.label }}</el-option
              >
            </el-select>
          </div>
        </div>
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title"></p>
          <div class="col-2 attr-item-edit-input">
            <el-select
               @change="updateNumberStyle"
              v-model="numberStyle.fontFamily"
              size="mini"
            >
              <!-- 正常加粗细体 -->
              <el-option
                v-for="item in textOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >{{ item.label }}</el-option
              >
            </el-select>
          </div>
          <div class="col-2 attr-item-edit-input">
            <el-input
              placeholder="颜色"
              @change="updateNumberStyle"
              v-model="numberStyle.fill"
              size="mini"
              class="input-with-select"
            >
            </el-input>
            <el-color-picker
              class="colorChoose"
              size="mini"
               @change="updateNumberStyle"
              v-model="numberStyle.fill"
            ></el-color-picker>
          </div>
        </div>

        <!-- 文字样式 -->

        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title">文字样式</p>
          <div class="col-2 attr-item-edit-input">
            <el-input-number
              size="mini"
              @change="updateTextStyle"
              v-model="textStyle.fontSize"
              controls-position="right"
              :min="0"
            />
          </div>
          <div class="col-2 attr-item-edit-input">
            <el-select
              @change="updateTextStyle"
              v-model="textStyle.fontWeight"
              size="mini"
            >
              <el-option
                v-for="item in textStyleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >{{ item.label }}</el-option
              >
            </el-select>
          </div>
        </div>
        <div class="attr-item-edit-wrapper">
          <p class="attr-item-title"></p>
          <div class="col-2 attr-item-edit-input">
            <el-select
               @change="updateTextStyle"
              v-model="textStyle.fontFamily"
              size="mini"
            >
              <!-- 正常加粗细体 -->
              <el-option
                v-for="item in textOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >{{ item.label }}</el-option
              >
            </el-select>
          </div>
          <div class="col-2 attr-item-edit-input">
            <el-input
              placeholder="颜色"
              @change="updateTextStyle"
              v-model="textStyle.color"
              size="mini"
              class="input-with-select"
            >
            </el-input>
            <el-color-picker
              class="colorChoose"
              size="mini"
               @change="updateTextStyle"
              v-model="textStyle.color"
            ></el-color-picker>
          </div>
        </div>


      </el-collapse-item>
      <!-- <el-collapse-item title="系列设置" name="3">
        <xAxis :xAxisConfig="chartConfig" />
      </el-collapse-item> -->
      <el-collapse-item title="图例设置" name="4">
        <legendStyle :legendConfig="legendConfig"/>
      </el-collapse-item>
      <el-collapse-item title="系列设置" name="5" style="position: relative;">
        <seriesSetting :seriesSettingConfig='seriesSettingConfig' v-if="seriesSettingConfig" :formList="formList" />
      </el-collapse-item>
      <el-collapse-item title="动画设置" name="6">
        <animationConfig :animationConfig="chartConfig" />
      </el-collapse-item>
    </el-collapse>
  </el-form-item>
</template>

<script>
import xAxis from "../components/xAxis";
import yAxis from "../components/yAxis";
import seriesSetting from "../components/seriesSetting";
import baseFormStyle from "../components/baseFormStyle";
import barSimpleStyle from "../components/barSimpleStyle";
import animationConfig from "../components/animationConfig";
import legendStyle from "../components/legendStyle";
import { mapState, mapGetters } from "vuex";
export default {
  name: "attr-qk-circlePieChartForm",
  computed: {
    ...mapState({
      // projectData: state => state.editor.projectData,
      // activePageUUID: state => state.editor.activePageUUID,
      // activeElementUUID: state => state.editor.activeElementUUID,
      activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
    }),
    ...mapGetters([
      // 'currentPageIndex',
      // 'activeElementIndex',
      // 'activeElement',
      // 'activePage'
      "activeElement"
    ]),
    chartConfig() {
      return this.activeElement.propsValue.circlePieChartForm;
    },
    yAxisData() {
      return this.activeElement.propsValue.circlePieChartForm.yAxis;
    },
    // seriesConfig() {
    //   return this.activeElement.propsValue.circlePieChartForm.series[0];
    // },
    legendConfig() {
      return this.activeElement.propsValue.circlePieChartForm.legend;
    },
    seriesSettingConfig() {
      return this.activeElement.propsValue.circlePieChartForm.series[0].data;
    },
  },
  data() {
    return {
      activeNames: ["1"],
      dataType: "num",
      numberStyle: {
        fontWeight: "normal",
        fontSize: 30,
        fontFamily: "Arial",
        fill: "#3de7c9"
      },
      textStyle:{
        fontWeight: "normal",
        fontSize: 20,
        fontFamily: "Arial",
        color: "#fff"
      },
      textOptions: [
        {
          value: "serif",
          label: "微软雅黑"
        },
        {
          value: "monospace",
          label: "方正"
        }
      ],
      textStyleOptions: [
        {
          value: "normal",
          label: "正常"
        },
        {
          value: "bold",
          label: "加粗"
        },
        {
          value: "lighter",
          label: "细体"
        }
      ],
      formList:[
          {title: '填充颜色',type:'color',route:'itemStyle'},
          {title: '系列名',type:'title',route:''},
        ]
    };
  },
  methods: {
    updateNumberStyle() {
      this.$bus.$emit("updateNumData", { style: this.numberStyle });
    },
    updateTextStyle() {
      this.$bus.$emit("updateTextData", this.textStyle );
    },
    handel() {
      if(this.dataType==='num'){
          this.$bus.$emit("updateContent", { content:'{nt}'  });
      }else{
        this.$bus.$emit("updateContent", { content:'{nt}%'  });
      }
      
      //content
    }
  },
  mounted() {
    this.activeNames = this.activeAttrEditCollapse;
  },
  watch: {
    activeNames() {
      this.$store.commit("updateActiveAttrEditCollapse", this.activeNames);
    }
  },
  components: {
    xAxis,
    yAxis,
    seriesSetting,
    baseFormStyle,
    barSimpleStyle,
    legendStyle,
    animationConfig
  }
};
</script>

<style scoped>
</style>
